<template>
  <div class="strut-div">
    <div class="card-item" style="height:250px;">
      <p class="card-title">气象监控</p>
      <div class="card-div">
        <div class="weather">
          <div class="weather-icon"><img :src="`https://cdn.heweather.com/cond_icon/${weather.cond_code || 100}.png`" /></div>
          <span class="weather-cond">{{ weather.cond_txt }}</span>
          <span class="weather-temp">
            {{ weather.tmp || 0 }}
            <span class="temp-unit">℃</span>
          </span>
          <div class="weather-date">
            <p class="weather-time">{{ date.time }}</p>
            <p class="weather-text">{{ date.text }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card-item" style="height:355px;" v-for="(chart, index) in links" :key="index" :class="{ 'card-item-dual': index != 2 }">
      <p class="card-title">{{ properties[chart].name }}</p>
      <div class="card-div"><common-dualarea-chart :ref="chart" :config="defaultChart(chart)" /></div>
    </div>
  </div>
</template>

<script>
import { getWeather } from '@/network/tg-fake-data';
import CommonPieNewChart from '@/components/common/common-pieNew-chart';
import CommonDualareaChart from '@/components/common/common-dualarea-chart';

const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

export default {
  name: 'sxLeft',
  components: {
    CommonPieNewChart,
    CommonDualareaChart
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    properties: {
      type: Object,
      default: () => ({})
    },
    links: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    // 获取天气数据
    getWeather()
      .then(item => {
        this.weather = item;
      })
      .catch(e => this.$alert(e));
    // 设置定时器，更新时间日期，按照分钟来
    setInterval(() => {
      this.date = this.getDate(new Date());
    }, 60 * 1000);
  },
  data() {
    return {
      weather: {},
      date: this.getDate(new Date())
    };
  },
  watch: {
    links(value) {
      if (value && value.length) {
        this.$nextTick(() => {
          this.links
            .map(key => this.$refs[key])
            .filter(ref => !!ref)
            .forEach(ref => ref[0].initChart());
        });
      }
    }
  },
  methods: {
    getDate(now) {
      const { prefixZero } = this;
      const month = prefixZero(now.getMonth() + 1, 2);
      const date = prefixZero(now.getDate(), 2);
      const hours = prefixZero(now.getHours(), 2);
      const minutes = prefixZero(now.getMinutes(), 2);
      return {
        time: `${hours}:${minutes}`,
        text: `${now.getFullYear()}年${month}月${date}日 ${weekday[now.getDay()]}`
      };
    },
    prefixZero(num, n) {
      return (Array(n).join('0') + num).slice(-n);
    },
    defaultChart(id) {
      const {
        [id]: {
          colors: [startColor, endColor],
          formatter
        }
      } = this.properties;
      const data = this.data[id] || [];
      return {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id,
          x: this.data.time || [],
          y: [
            {
              axis: {
                min: 0,
                max: null,
                offset: -10,
                fontSize: 10,
                label: formatter
              },
              smooth: true,
              title: '',
              data,
              startColor,
              endColor
            }
          ]
        }
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.card-item {
  margin-bottom: 20px;
}
.card-item-dual {
  width: 420px;
}
.card-item:nth-of-type(2) {
  margin-right: 20px;
}

.weather {
  display: block;
  width: 600px;
  margin: 0 auto;

  .weather-icon {
    overflow: hidden;
    width: 100px;
    display: inline-block;

    img {
      position: relative;
      left: -100px;
      top: 10px;
      -webkit-filter: drop-shadow(100px 0px #00e2ff);
      filter: drop-shadow(100px 0px #00e2ff);
    }
  }

  .weather-cond {
    margin: 0 20px 0 5px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(0, 226, 255, 1);
    line-height: 36px;
  }

  .weather-temp {
    font-size: 98px;
    font-family: Digitalism, serif;
    font-weight: 400;
    color: rgba(255, 203, 3, 1);
    line-height: 98px;
    letter-spacing: 5px;

    .temp-unit {
      font-size: 80px;
      font-family: sans-serif;
    }
  }

  .weather-date {
    display: inline-block;
    margin-left: 30px;

    p:nth-child(1) {
      font-size: 36px;
      font-family: Digitalism, serif;
      letter-spacing: 4px;
      color: rgba(0, 226, 255, 1);
      line-height: 36px;
    }

    p:nth-child(2) {
      margin-top: 3px;
      font-size: 18px;
      color: rgba(0, 226, 255, 1);
      line-height: 36px;
    }
  }
}
</style>
